<template>
	<view class="goods">
		<swiper :indicator-dots="true" :circular="true">
			<swiper-item v-for="(item,index) of bannerList" :key="item.index">
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="box1">
			<view class="price">
				<text>¥{{info.sell_price}}</text>
				<text>¥{{info.market_price}}</text>
			</view>
			<view class="goods_name">{{info.title}}</view>
		</view>
		<view class="line"></view>
		<view class="box2">
			<view>ISBN：{{info.goods_no}}</view>
			<view>库存：{{info.stock_quantity}}</view>
		</view>
		<view class="line"></view>
		<view class="box3">
			<view class="title">详情介绍</view>
			<view class="content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</view>
		<view class="goods_nav">
			<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
				bannerList: [
					'/static/第二本书图片1.jpg',
					'/static/第二本书图片2.jpg',
				],
				info: {
					 sell_price: 74.80,
					 market_price: 88.00,
					 title: "机器学习: 原理.算法与应用 雷明 编程语言 专业科技 清华大学出版社",
					 goods_no: 9787302532347,
					 stock_quantity: 1500
				},
				content: '全面系统地讲述了深度学习、机器学习的主要算法，包括有监督学习，无监督学习，强化学习的54种算法。对算法的思想，推导与证明，实现要点有清晰透彻的阐述 对机器学习、深度学习算法在计算机视觉，自然语言处理，语音识别等领域的应用有详细的介绍 配有20个实验程序，包含18份源代码，帮助读者正确的掌握算法与开源库的使用 配有25个讲解视频，对复杂、难以理解的知识点有清晰透彻的讲解。<br>机器学习是当前解决很多人工智能问题的核心技术，自2012年以来，深度学习的出现带来了人工智能复兴。本书是机器学习和深度学习领域的入门与提高教材，紧密结合工程实践与应用，系统、深入地讲述机器学习与深度学习的主流方法与理论。全书由23章组成，共分为三大部分。～3章为部分，介绍机器学习的基本原理、所需的数学知识（包括微积分、线性代数、很优化方法和概率论），以及机器学习中的核心概念。第4～22章为第二部分，是本书的主体，介绍各种常用的有监督学习算法、无监督学习算法、半监督学习算法和强化学习算法。对于每种算法，从原理与推导、工程实现和应用3个方面进行介绍，对于大多数算法，都配有实验程序。第23章为第三部分，介绍机器学习和深度学习算法实际应用时面临的问题，并给出典型的解决方案。本书理论推导与证明详细、深入，结构清晰，详细地讲述主要算法的原理与细节，让读者不仅知其然，还知其所以然，真正理解算法、......',
				options: [{
				           icon: 'headphones',
				           text: '客服'
				       }, {
				           icon: 'shop',
				           text: '店铺',
				           info: 2,
				           infoBackgroundColor:'#007aff',
				           infoColor:"red"
				       }, {
				           icon: 'cart',
				           text: '购物车',
				           info: 2
				       }],
				       buttonGroup: [{
				         text: '加入购物车',
				         backgroundColor: '#ff0000',
				         color: '#fff'
				       },
				       {
				         text: '立即购买',
				         backgroundColor: '#ffa200',
				         color: '#fff'
				       }
				       ]
			}
		},
			methods: {
				onClick (e) {
				        uni.showToast({
				          title: `点击${e.content.text}`,
				          icon: 'none'
				        })
				      },
				      buttonClick (e) {
				        console.log(e)
				        this.options[2].info++
				      }
			},
			components: {uniGoodsNav}
		}
</script>

<style lang="scss">
	.goods {
		margin-top: 8rpx;

		swiper {
			width: 750rpx;
			height: 680rpx;

			image {
				height: 100%;
				width: 100%;
			}
		}
		.box1 {
			padding: 10px;

		.price {
			font-size: 40rpx;
			color: $shop-color;
			line-height: 60rpx;

			text:nth-child(2) {
				color: #ccc;
				font-size: 33rpx;
				text-decoration: line-through;
				margin-left: 20rpx;
			}
		}

		.goods_name {
			font-size: 34rpx;
			line-height: 60rpx;
		}
	
}
	.line {
		height: 10rpx;
		width: 750rpx;
		background: #eee;
	}

	.box2 {
		padding: 0 10px;
		font-size: 32rpx;
		line-height: 70rpx;
	}

	.box3 {
		padding-bottom: 50px;

		.title {
			font-size: 40rpx;
			padding-left: 10rpx;
			border-bottom: 1px solid #eee;
			line-height: 70rpx;
			font-weight: 550;
		}

		.content {
			padding: 10px;
			font-size: 35rpx;
			color: #000000;
			line-height: 50rpx;
		}
	}
}
	.goods_nav {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	
</style>
